<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell>
      <template slot="title">
        <div class="titleText">我的频道</div>
      </template>
      <template slot="default">
        <van-button
          class="editBtn"
          type="danger"
          round
          size="mini"
          plain
          @click="isEdit = !isEdit"
          >{{ isEdit ? "完 成" : "编 辑" }}</van-button
        >
      </template>
    </van-cell>
    <!-- 我的频道单元格 -->
    <van-grid :gutter="10" class="myGrid">
      <van-grid-item
        v-for="(channel, index) in myChannels"
        :key="index"
        @click="onClickMyChannel(channel, index)"
      >
        <template slot="icon">
          <van-icon
            name="clear"
            v-show="isEdit && !fixed.includes(channel.id)"
          ></van-icon>
        </template>

        <template slot="text">
          <span :class="[{ active: index === active }, 'text']">{{
            channel.name
          }}</span>
        </template>
      </van-grid-item>
    </van-grid>

    <!-- 推荐频道 -->
    <van-cell>
      <template slot="title">
        <div class="titleText">推荐频道</div>
      </template>
    </van-cell>
    <!-- 推荐频道单元格 -->
    <van-grid :gutter="10" class="recommendGrid">
      <van-grid-item
        v-for="(channel, index) in recommendChannels"
        :key="index"
        :text="channel.name"
        icon="plus"
        @click="onAddChannel(channel)"
      />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels,addUserChannel,delUserChannel } from "@/api/channel.js";
import { mapState } from "vuex";
import {setItem} from '@/utils/storage.js'

export default {
  name: "channelEdit",
  props: {
    myChannels: {
      type: Array,
      required: true,
    },
    active: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      allChannels: [],
      isEdit: false,
      fixed: [0],
    };
  },
  methods: {
    async loadAllChannels() {
      try {
        const { data: res } = await getAllChannels();
        //  console.log(res.data.channels);
        this.allChannels = res.data.channels;
      } catch (err) {
        this.$toast("获取所有频道失败");
      }
    },
    async onAddChannel(channel) {
      this.myChannels.push(channel);

      // 持久化保存
      // 1.登录保存在线上
      // 2.未登录保存在本地存储
      if (this.user) {
        // 1.登录保存在线上
        try{
          await addUserChannel({
            id:channel.id,
            seq:this.myChannels.length
          })
        }catch(err){
          this.$toast("添加用户频道失败")
        }

      } else {
        // 2.未登录保存在本地存储
        setItem("TOUTIAO-CHANNELS",this.myChannels)
      }
    },
    async onClickMyChannel(channel, index) {
      // console.log(123);
      // this.active = index
      // this.$emit("update:active",index)
      if (this.isEdit) {
        // 编辑状态

        // 3.解决是否是固定频道
        if (this.fixed.includes(channel.id)) {
          return;
        }
        // 2.解决高亮问题
        if (index <= this.active) {
          this.$emit("update-active", this.active - 1, true);
        }
        // 1.前端页面删除
        this.myChannels.splice(index, 1);

        // 持久化删除
        try {
          if(this.user){
            // 线上接口删除
            await delUserChannel(channel.id)
          }else{
            // 本地存储删除
            setItem("TOUTIAO-CHANNELS",this.myChannels)
          }
        }catch(err){
          this.$toast("删除频道失败")
        }

      } else {
        // 非编辑状态
        this.$emit("update-active", index, false);
      }
    },
  },
  created() {
    this.loadAllChannels();
  },
  computed: {
    ...mapState(["user"]),
    recommendChannels() {
      return this.allChannels.filter((channel) => {
        return !this.myChannels.find((myChannel) => {
          return myChannel.id === channel.id;
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.channel-edit {
  padding: 85px 0;

  .titleText {
    font-size: 32px;
    color: #333;
  }

  ::v-deep .editBtn {
    width: 104px;
    height: 48px;
    color: #f85c5c;
    border: 1px solid #f85c5c;
    .van-button__text {
      font-size: 26px;
    }
  }

  ::v-deep .van-grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      background-color: #f3f5f5;
      .van-grid-item__text,
      .text {
        font-size: 28px;
        white-space: nowrap;
        color: #222;
      }
      .active {
        color: red;
      }
      .van-grid-item__icon-wrapper {
        position: unset;
      }
    }
  }

  ::v-deep .myGrid {
    .van-icon-clear {
      position: absolute;
      top: -10px;
      right: -10px;
      z-index: 2;
      font-size: 36px;
      color: #ccc;
    }
  }

  ::v-deep .recommendGrid {
    .van-grid-item__content {
      flex-direction: row;
      .van-icon-plus {
        font-size: 28px;
        margin-right: 5px;
      }
      .van-grid-item__text {
        margin-top: 0;
      }
    }
  }
}
</style>